<script setup lang="ts">
import {computed, reactive, ref} from 'vue';
import api from '@/api';
import {onLoad} from "@dcloudio/uni-app";
import type {OrderCaleResType, OrderCreateResType} from "@/types/order";
import type {AddressInfoType} from "@/types/address";

// 当前订单类型
const orderType = ref('dine_in');
const diningType = ref('1');
// 订单类型列表
const orderTypeList = reactive([
  { name: '堂食' ,slug:'dine_in' },
  { name: '外卖' ,slug:'delivery' },
]);
const changeOrderType = (e) => {
  orderType.value = e.slug;
};
// 计算订单
const onOrderCalc= async () => {
  await api.order.calcApi(orderType).then((res:ApiResponse<OrderCaleResType>) => {
    // 如果没有订单商品，跳转订单列表页
    if(res.data.goods_list.length === 0){
      uni.redirectTo({
        url: '/pages/order/index'
      })
    }
    Object.assign(state, res.data)
  })

}
const state = reactive({
  goods_amount:0,
  dispatch_amount:0,
  real_dispatch_amount:0,
  order_amount:0,
  pay_fee:0,
  temp_remain_pay_fee:0,
  total_discount_fee:0,
  coupon_discount_fee:0,
  money:0,
  goods_list:[],
  need_address:0
})
const remark = ref('');

const onSubmit = async () => {
  await api.order.createApi({
    order_type:orderType.value,
    dining_type:diningType.value,
    address_id:addressInfo.value?.id ?? 0,
    remark:remark.value,
  }).then((res:ApiResponse<OrderCreateResType>) => {
    if(res.code === 1){
      // 跳转支付
      if(res.data.status_desc === 'unpaid'){
        uni.redirectTo({
          url: '/pages/pay/pay?order_sn=' + res.data.order_sn
        })
      }else {
        uni.switchTab({
          url: '/pages/order/index'
        })
      }
    }
  })
}

const addressInfo=ref<AddressInfoType|null>(null);
const getAddressDefault =async () => {
  await api.address.defaultApi().then( (res:ApiResponse<AddressInfoType>) => {
    addressInfo.value = res.data;
  })
}

const onSelectAddress = () => {
  uni.$once('SELECT_ADDRESS', (res) => {
    addressInfo.value = res.addressInfo;
  });
  uni.navigateTo({
    url: '/pages/address/index',
  });
}

onLoad(() => {
  onOrderCalc()
  getAddressDefault()
})
</script>

<template>
  <view class="container">
    <view  class="content">
      <up-tabs :list="orderTypeList" keyName="name" @change="changeOrderType">
      </up-tabs>
      <view class="section-1">
        <template v-if="orderType == 'dine_in'">
          <up-cell-group :border="false">
            <up-cell :border="false" title="xx奶茶店" isLink center></up-cell>
          </up-cell-group>
          <up-cell-group>
            <up-radio-group
                v-model="diningType"
                placement="row">
              <up-radio activeColor="#f0ad4e" label="店内堂食" name="1"></up-radio>
              <up-radio activeColor="#f0ad4e" label="打包带走" name="2"></up-radio>
            </up-radio-group>
          </up-cell-group>

        </template>

        <template v-else>
          <up-cell-group :border="false">
            <up-cell
                :title="addressInfo ? `${addressInfo?.city_text ?? ''} ${addressInfo?.address ?? ''}` : '请选择地址'"
                isLink
                :label="`${addressInfo?.consignee || ''} ${addressInfo?.mobile || ''}`"
                :border="false"
                center
                @tap="onSelectAddress"
            ></up-cell>
          </up-cell-group>
        </template>

      </view>
      <!-- 购物车列表 begin -->
      <view class="section-2">
        <view class="cart d-flex flex-column">
          <view class="shop" v-for="(item, index) in state.goods_list" :key="index">
            <view class="w-100 d-flex flex-column">
              <view class="d-flex align-items-center mb-10">
                <view class="name-and-props overflow-hidden">
                  <view class="text-color-base font-size-lg">
                    {{ item.goods_name }}
                  </view>
                </view>
                <view
                    class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg"
                >
                  <view>x{{ item.goods_num }}</view>
                  <view>￥{{ item.snapshot_price }}</view>
                </view>
              </view>
              <view class="text-truncate font-size-base text-color-assist">
                {{ item.snapshot_description }}
              </view>
            </view>
          </view>

        </view>

        <up-cell-group>
          <up-cell
              @click="goToPackages"
              title="优惠券"
              isLink
              value="超值购买优惠券大礼包"
              center
              :border="false"
          ></up-cell>
        </up-cell-group>

        <view class="total-box">
          <view>总计￥{{ state.order_amount }},实付</view>
          <view class="font-size-extra-lg font-weight-bold"
          >￥{{ state.pay_fee }}</view
          >
        </view>
      </view>
      <!-- 购物车列表 end -->
      <view
          class="d-flex align-items-center justify-content-start font-size-sm text-color-warning"
          style="padding: 20rpx 0"
      >
        <view class="iconfont iconhelp line-height-100"></view>
        <view>优惠券不与满赠、满减活动共享</view>
      </view>

      <!-- 支付方式 begin -->
      <view class="payment">
        <view last :hover="false">
          <u--text text="支付方式" margin="10rpx 0"></u--text>
        </view>
        <up-cell-group>
          <up-cell
              @click="goToPackages"
              title="微信支付"
              center
              :border="false"
          >
            <template #icon>
              <image
                  src="/static/images/pay/wx_pay.png"
                  class="payment-icon"
              ></image>
            </template>
            <template #right-icon>
              <up-icon v-show="1==2" name="circle-filled" color="#f0ad4e" size="24"></up-icon>
               <up-radio-group v-model="value">
                <up-radio
                  shape="circle"
                  disabled
                  activeColor="#f0ad4e"
                ></up-radio>
              </up-radio-group>
            </template>
          </up-cell>
        </up-cell-group>
      </view>
      <!-- 支付方式 end -->

      <!-- 备注 begin -->
      <view class="payment">
        <up-cell-group :border="false">
          <up-cell
              title="备注"
              center
              :border="false"
          >
            <template #value>
              <up-textarea style="flex: 2;" height="40" v-model="remark" placeholder="请输入内容" border="bottom"></up-textarea>
            </template>
          </up-cell>
        </up-cell-group>
      </view>
      <!-- 备注 end -->
    </view>

    <!-- 付款栏 begin -->
    <view
        class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white"
    >
      <view class="font-size-sm" style="margin-left: 20rpx">合计：</view>
      <view class="font-size-lg flex-fill">￥{{ state.pay_fee }}</view>
      <view class="play-btn" style="padding: 0 60rpx" @tap="onSubmit">
        付款
      </view>
    </view>

    <!-- 付款栏 end -->

    <up-modal
        confirmColor="#f0ad4e"
        :show="ensureAddressModalVisible"
        title="请再次确认下单地址"
    >
      <view class="slot-content">
        <view
            class="d-flex font-size-base text-color-base font-weight-bold align-items-center justify-content-between mb-20"
        >
          <view>陈慧 女士 </view>
          <view>1221111111 </view>
        </view>
        <view class="address-box">
          <view>
            <u--text text="龙华区观澜2111路120室" type="info" margin="0 10rpx 0 0" size="14"></u--text>
          </view>
          <view>
            <u-button
                type="warning"
                size="mini"
                plain
                class="change-address-btn"
            >
              修改地址
            </u-button></view
          >
        </view>
      </view>
    </up-modal>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  box-sizing: border-box;
  // height: 100%;
  //margin-bottom: 200rpx;
  .content{
    height: 100%;
    margin-bottom: 200rpx;
    box-sizing: border-box;
    //background-color: red;
  }
}

// .arrow {
//   width: 50rpx;
//   height: 50rpx;
//   position: relative;
//   margin-right: -10rpx;
// }

.location {
  .store-name {
    // font-size: $font-size-lg;
  }

  .iconfont {
    font-size: 50rpx;
    line-height: 100%;
    // color: $color-primary;
  }
}

.section-1 {
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  .contact {
    .contact-tip {
      margin-left: 10rpx;
      // border: 2rpx solid $color-primary;
      padding: 6rpx 10rpx;
      // color: $color-primary;
    }
  }
}

.section-2 {
  background: #fff;
  // padding: 20rpx;
  border-radius: 20rpx;
  .name-and-props {
    width: 65%;
  }
}

.payment {
  margin-bottom: 30rpx;
  background: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  .disabled {
    // color: $text-color-grey;
  }

  .payment-icon {
    font-size: 44rpx;
    margin-right: 10rpx;
    width: 60rpx;
    height: 60rpx;
  }

  .checkbox {
    font-size: 36rpx;
    margin-left: 10rpx;
  }

  .checked {
    color: $uni-color-primary;
  }
}

.pay-box {
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  height: 100rpx;
}



.play-btn {
  background-color: #f0ad4e;
  color: #fff;
  height: 100%;
  line-height: 100rpx;
}
.address-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.slot-content{
  width: 100%;
}

.shop{
  padding: 20rpx 30rpx;
}
.total-box{ display: flex;
  justify-content: flex-end;
  padding: 30rpx;}
</style>
